<template>
    <div id="breed" style="width:100%;height:400px;"></div>

</template>

<script>
import echarts from 'echarts';
import { color } from 'echarts/lib/export';

export default {
    data() {
        return {

        }
    },
    mounted() {
        let graphicsData = JSON.parse(localStorage.getItem('graphicsData'))
        console.log(graphicsData)

        console.log('品种数据：', graphicsData.commodityGraphVo)
        // console.log('1111', graphicsData.commodityGraphVo.commodityName)
        // console.log('做多：',graphicsData.commodityGraphVo.directions['多'])
        // console.log('多空数据：',graphicsData.commodityGraphVo.directions)

        this.$nextTick(() => {
            let tradeChart = echarts.init(document.getElementById('breed'));
            let option = {
                title: {
                    text: '品种',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['做多', '做空'],
                    // data: graphicsData.commodityGraphVo.commodityName,
                    left: 'right',
                    // textStyle: {
                    //     color: ['#000', '#f40'] // 这里设置每个系列的颜色
                    // }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: graphicsData.commodityGraphVo.commodityName,
                        axisLabel: {
                            show: true // 显示x轴标签
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisTick: {
                            show: true
                        },
                        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        data: graphicsData.commodityGraphVo.commodityName
                    }
                ],
                series: [
                    {
                        itemStyle: {
                            // normal: {
                            //     color: function (params) {
                            //         var colorList = ["blue", "green"];
                            //         return colorList[params.dataIndex]
                            //     }
                            // }
                            color: 'rgb(252,204,198)'
                        },
                        name: '做空',
                        type: 'bar',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'left'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: graphicsData.commodityGraphVo.directions['空']
                        // data: [-55, -122]
                    },
                    {
                        itemStyle: {
                            // normal: {
                            //     color: function (params) {
                            //         var colorList = ["blue", "green"];
                            //         return colorList[params.dataIndex]
                            //     }
                            // }
                            color: '#1890ff'
                        },
                        name: '做多',
                        type: 'bar',
                        stack: 'Total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: graphicsData.commodityGraphVo.directions['多']
                    }

                ]
            };

            tradeChart.setOption(option);

            window.addEventListener('resize', function () {
                tradeChart.resize();
            })
        })

    },
}
</script>
<style lang="scss" scoped></style>